{% extends "base.html" %}

{% block title %}上传电子书 - 墨韵图书共享平台{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card ink-card">
                <div class="card-header ink-header">
                    <h4 class="mb-0"><i class="fas fa-book me-2"></i>上传电子书</h4>
                </div>
                <div class="card-body">
                    <form action="{{ url_for('upload_book') }}" method="POST" enctype="multipart/form-data">
                        <div class="mb-4">
                            <label for="title" class="form-label">书名</label>
                            <input type="text" class="form-control ink-input" id="title" name="title" required
                                   placeholder="请输入书名">
                        </div>
                        
                        <div class="mb-4">
                            <label for="author" class="form-label">作者</label>
                            <input type="text" class="form-control ink-input" id="author" name="author" required
                                   placeholder="请输入作者名">
                        </div>
                        
                        <div class="mb-4">
                            <label for="category" class="form-label">选择分类</label>
                            <div class="d-flex align-items-center">
                                <select class="form-select ink-input me-2" id="category" name="category_id" required>
                                    <option value="">请选择分类</option>
                                    {% for category in categories %}
                                        <option value="{{ category.id }}">{{ category.name }}</option>
                                    {% endfor %}
                                </select>
                                <a href="{{ url_for('create_category') }}" class="btn btn-outline-primary">
                                    <i class="fas fa-plus"></i>
                                </a>
                            </div>
                            <div class="form-text">如果没有合适的分类，可以点击右侧按钮创建新分类</div>
                        </div>
                        
                        <div class="mb-4">
                            <label for="description" class="form-label">图书描述</label>
                            <textarea class="form-control ink-input" id="description" name="description" rows="4"
                                      placeholder="请输入图书描述（可选）"></textarea>
                        </div>
                        
                        <div class="mb-4">
                            <label for="tags" class="form-label">标签</label>
                            <input type="text" class="form-control ink-input" id="tags" name="tags"
                                  placeholder="输入标签，用逗号分隔，如: 计算机,编程,Python">
                            <div class="form-text">多个标签用逗号分隔，便于用户检索图书</div>
                        </div>
                        
                        <div class="mb-4">
                            <label for="book_file" class="form-label">电子书文件</label>
                            <input type="file" class="form-control ink-input" id="book_file" name="book_file" required
                                   accept=".pdf,.epub,.mobi,.txt">
                            <div class="form-text">支持的格式：PDF, EPUB, MOBI, TXT</div>
                        </div>
                        
                        <div class="mb-4">
                            <label for="cover_file" class="form-label">封面图片（可选）</label>
                            <input type="file" class="form-control ink-input" id="cover_file" name="cover_file"
                                   accept=".jpg,.jpeg,.png,.gif">
                            <div class="form-text">
                                支持的格式：JPG, PNG, GIF。不上传封面时，系统将自动从PDF首页提取封面或创建默认封面。
                                建议尺寸比例：2:3 (如 300x450 像素)
                            </div>
                            
                            <!-- 封面预览区域 -->
                            <div class="mt-3">
                                <div id="cover-preview" class="d-none text-center p-3 border rounded">
                                    <img id="cover-image" src="#" alt="封面预览" style="max-height: 200px; max-width: 100%;" />
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-between">
                            <a href="{{ url_for('books') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-arrow-left me-2"></i>返回图书列表
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-upload me-2"></i>上传图书
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.ink-card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.ink-header {
    background-color: #f8f9fa;
    border-bottom: none;
    padding: 1.5rem;
}

.ink-input {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 0.75rem;
    transition: all 0.3s ease;
}

.ink-input:focus {
    border-color: #6c757d;
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
}

textarea.ink-input {
    resize: vertical;
    min-height: 100px;
}
</style>

<script>
// 封面预览功能
document.addEventListener('DOMContentLoaded', function() {
    const coverFileInput = document.getElementById('cover_file');
    const coverPreview = document.getElementById('cover-preview');
    const coverImage = document.getElementById('cover-image');
    
    coverFileInput.addEventListener('change', function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            
            reader.onload = function(e) {
                coverImage.src = e.target.result;
                coverPreview.classList.remove('d-none');
            };
            
            reader.readAsDataURL(file);
        } else {
            coverPreview.classList.add('d-none');
        }
    });
});
</script>
{% endblock %} 